<template>
  <v-container fluid grid-list-md>
    <v-layout row wrap>
      <v-layout row wrap>
        <v-flex md12>
          <v-btn round @click="addRole" dark color="cyan">
            <v-icon>add</v-icon>
            <span class="pl-2 subheading">新增角色</span>
          </v-btn>
        </v-flex>
        <v-flex d-flex md12>
          <v-layout row wrap>
            <v-flex row>
              <!-- 查询数据表格 -->
              <v-data-table :loading="tableLoading" :headers="headers" :items="tableData" hide-actions class="elevation-1">
                <v-progress-linear slot="progress" color="teal" height="5" v-if="showProgress" indeterminate></v-progress-linear>
                <template slot="items" slot-scope="props">
                  <td class="text-xs-center subheading">{{ props.item.roleid }}</td>
                  <td class="text-xs-center subheading">{{ props.item.rolename }}</td>
                  <td class="text-xs-center subheading">{{ props.item.remarks }}</td>
                  <td class="text-xs-center">
                    <v-btn v-if="!showExam" flat round dark color="green darken-1" class="mx-1" @click="grantAccess(props.item)">
                      <span class="mx-1">设置权限</span>
                      <v-icon color="green darken-1">accessibility</v-icon>
                    </v-btn>
                    <v-btn flat round dark color="red" class="mx-1" @click="deleteRole(props.item)">
                      <span class="mx-1">删除角色</span>
                      <v-icon color="red">delete</v-icon>
                    </v-btn>
                  </td>
                </template>
                <template slot="no-data">
                  <div class="text-md-center">
                    <v-icon color="yellow darken-3">warning</v-icon>
                    <span class="subheading">暂无数据</span>
                  </div>
                </template>
              </v-data-table>
              <!-- 表格显示分页 -->
              <v-layout>
              </v-layout>
            </v-flex>
          </v-layout>
        </v-flex>
      </v-layout>
    </v-layout>
    <v-dialog v-model="dialog" max-width="600px">
      <v-card v-if="toggleDialog">
        <v-card-title>
          <span class="headline">{{ formTitle }}</span>
        </v-card-title>
        <v-card-text>
          <v-container grid-list-md>
            <v-layout wrap>
              <v-flex xs12 sm8 md6>
                <v-checkbox color="red" :label="`管理员: ${accessForm.admin.toString()}`" v-model="accessForm.admin"></v-checkbox>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" flat @click.native="close">取消</v-btn>
          <v-btn color="blue darken-1" flat @click.native="save">确定</v-btn>
        </v-card-actions>
      </v-card>
      <v-card v-else>
        <v-card-title>
          <span class="headline">新增角色</span>
        </v-card-title>
        <v-card-text>
          <v-layout justify-center>
            <v-flex md10>
              <v-text-field name="rolename" prepend-icon="account_box" label="角色名称" v-model="roleItem.rolename"></v-text-field>
            </v-flex>
          </v-layout>
          <v-layout justify-center>
            <v-flex md10>
              <v-text-field name="rolename" prepend-icon="reorder" label="备注" v-model="roleItem.remarks"></v-text-field>
            </v-flex>
          </v-layout>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" flat @click.native="dialog = false">取消</v-btn>
          <v-btn color="green darken-1" flat @click.native="confirmDialog">确认</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog v-model="modal" persistent max-width="290">
      <v-card>
        <v-card-title class="headline">注意!</v-card-title>
        <v-card-text class="title">{{modalText}}</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" flat @click.native="modal = false">取消</v-btn>
          <v-btn color="green darken-1" flat @click.native="modal = false">确认</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script>
import * as auth from '../../api/auth'
export default {
  data: () => ({
    dialog: false,
    showProgress: true,
    tableLoading: false,
    pagination: {},
    modal: false,
    modalText: '确认删除该角色吗？',
    paymentType: [{
      text: '微信支付'
    }, {
      text: '支付宝'
    }],
    payment: null,
    tableData: [],
    checkbox: false,
    toggleDialog: true,
    accessForm: {
      admin:  false
    },
    headers: [
      { text: "ID", value: "roleid", align: "center", sortable: false },
      { text: "角色名称", value: "rolename", align: "center", sortable: false },
      { text: "备注", value: "remarks", align: "center", sortable: false },
      { text: "操作", value: "actions", align: "center", sortable: false },
    ],
    accessItems: [{
      text: '删除其他用户',
      value: 1
    }, {
      text: '查看用户信息',
      value: 2 
    }, {
      text: '修改用户信息',
      value: 3
    }, {
      text: '管理成员信息',
      value: 4
    }],
    roleItem: {
      rolename: '',
      roleid: '',
      remarks: ''
    },
    showExam:  false

  }),
  mounted() {
    this.showExam = Cookie.get('username') === 'shuaishuai'
  },
  created() {
    this.initialize();
  },
  computed: {
    formTitle() {
      return this.editedIndex === -1 ? "" : "代理录入";
    }
  },
  watch: {
    dialog(val) {
      val || this.close();
    }
  },
  methods: {
    initialize() {
      this.tableData = [
        {
          roleid: 1,
          rolename: "超级管理员",
          remarks: "具有全部权限，可管理其他管理员",
        },
        {
          roleid: 2,
          rolename: "管理员",
          remarks: "具有全部权限，可管理普通用户",
        },
        {
          roleid: 3,
          rolename: "普通用户",
          remarks: "具有管理自己相关信息权限",
        }
      ];
    },
    // 授权
    grantAccess(item) {
      this.$router.push(`/auth/authconfig/:${item.roleid}?role=${encodeURI(item.rolename)}`)
    },
    // 删除角色
    deleteRole(item) {
      console.log(item)
      this.modal = true
    },
    addRole() {
      this.dialog = true;
      this.toggleDialog = false
    },
    confirmDialog() {

    }
  }
};
</script>

<style lang="less" scoped>

</style>

